<template>
<div class="edit-main">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>文章信息-编辑</span>
    </div>
    <el-form ref="form"  label-width="80px">
      <el-row :gutter="10">
       <el-col :span="10">
         <el-form-item label="文章标题:" >
          <el-input v-model="artec.title" size="small" placeholder="请输入文章标题"></el-input>
         </el-form-item>
       </el-col>
        <el-col :span="10">
          <el-form-item  label="作者:" >
            <el-input v-model="artec.author" size="small" placeholder="请输入作者姓名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="7">
          <el-form-item label="封面图片" label-width="100px">
            <el-upload
              class="upload-demo"
              :action="imgurl"
              :on-success="imgupSucess"
              multiple
             >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <img style="width: 300px; height: 150px;" :src="imgurs" alt="">
        </el-col>
      </el-row>
      <el-row :gutter="10">
       <el-col :span="6">
         <el-form-item label="分类" >
           <el-checkbox-group v-model="checkiad">
             <el-checkbox v-for="item in kindlist" :label="item.id" :key="item.ctitle">{{item.ctitle}}</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
       </el-col>
        <el-col :span="6">
          <el-form-item label="颜色选择:" >
            <span>选择三种颜色:</span>
            <div>
              <el-color-picker v-model="artec.color1"></el-color-picker>
              <el-color-picker v-model="artec.color2"></el-color-picker>
              <el-color-picker v-model="artec.color3"></el-color-picker>
            </div>
            <div style="display: flex;margin-left: 1px" >
              <div style="width: 30px;height: 30px;border-radius: 100%" :style="{backgroundColor:artec.color1}"></div>
              <div style="width: 30px;height: 30px;border-radius: 100%;margin: 0px 15px" :style="{backgroundColor:artec.color2}"></div>
              <div  style="width: 30px;height: 30px;border-radius: 100%" :style="{backgroundColor:artec.color3}"></div>

            </div>


          </el-form-item>
        </el-col>
      </el-row>
<!--      选择富文本或者是makerdowm-->
      <el-row :gutter="10" style="margin-bottom: 20px">
       <el-col :span="6">
         <el-radio v-model="radio" label="1">富文本</el-radio>
         <el-radio v-model="radio" label="2">markdown文本</el-radio>
       </el-col>
      </el-row>
      <el-row :gutter="10">
       <el-col :span="22" v-show="radio == 1">
         <Tinymce ref="tin" :value="initValue" :uploadurl="uploadUrl"/>
       </el-col>
        <el-col :span="22" v-show="radio == 2">
          <MdEditor ref="md"  class="markdown" />
        </el-col>
      </el-row>

    </el-form>
<!--    按钮-->
    <el-row :gutter="10" style="margin-top: 30px">
     <el-col :span="1" style="margin-right: 20px" :offset="19">
       <el-button type="primary" @click="consoleEd">取消</el-button>
     </el-col>
      <el-col :span="1">
        <el-button type="primary" @click="submit">确定</el-button>

      </el-col>

    </el-row>
  </el-card>
</div>

</template>

<script>
import MdEditor from '@/components/MarkdownEditor'
import Tinymce from '@/components/Tinymce'
import kindApi from "@/api/product/kind";
import articleApi from "@/api/product/article";
import imgup from '@/settings'
export default {
  name: "EditLog",
  components:{
    Tinymce,
    MdEditor
  },
  data() {
    return {
      initValue: '',
      uploadUrl: 'http://www.bufantec.com/admin/xy/upload/uploadImg',
      imgurl:imgup.imgUrl,
      artec:{
        title:'',
        author:''
      },
      imgurs:"",
      kindlist:[],
      checkiad:[],
      radio:"1"
    }

  },
  methods: {
    imgupSucess(val){
      console.log(val)
      let url = val.ossUrl
        this.imgurs = url
      this.artec.coverImg = url

    },
    getkindlist(){
      kindApi.getKiadList()
        .then(res=>{
          console.log(res)
          this.kindlist = res.data;
        })
    },
    // 确认提交
    submit(){
    if (this.radio == 1){

      this.artec.content2 = this.$refs.tin.getContent()

    }else if(this.radio==2){
      this.artec.content1 = this.$refs.md.getValue()

    }

    //选中的类
    this.artec.kindIds = this.checkiad
      console.log(this.artec)
      let parms = this.artec
      articleApi.ArticleUp(parms)
      .then(res=>{
        console.log(res)
        this.$emit('closelog')
      })
    },
    consoleEd(){
      this.$emit('closelog')
    },
    //编辑还原页面
    EditPage(){

   let idnum=window.localStorage.getItem('editId')
      console.log(idnum)
      articleApi.getArticleDetail({
        id:idnum
      })
      .then(res=>{
        console.log(res)
        //还原内容
        this.artec = res.data;
        this.checkiad = res.data.kindIds
        this.imgurs = res.data.kindIds.coverImg
        TODO:问题
        if (res.data.content2){
          this.radio =1
          this.$refs.tin.setContent(res.data.content1)
        }else if (res.data.content1) {
          this.radio =2
          this.$refs.md.setValue(res.data.content1)
        }
        this.imgurs = res.data.coverImg
      })
    }

    //富文本内容
    // getTin() {
    //   var res = this.$refs.tin.getContent()
    //   console.log('获取富文本内容', res)
    // },
    // setTin() {
    //   // 建议使用  tin的方法设置内容
    //   this.$refs.tin.setContent('这是改变后的值...')
    //   //   this.initValue = '这是改变后的值...'
    // },
    // getMd() {
    //   // getHtml getValue
    //   console.log('getHtml', this.$refs.md.getHtml())
    //   console.log('getValue', this.$refs.md.getValue())
    // },
    // setMd() {
    //   this.$refs.md.setValue('## 这是初始化内容')
    // }


  },
  created(){
    this.getkindlist()

  }
}
</script>

<style lang="scss" scoped>
.edit-main{
  .box-card{
    width: 90%;
    margin: 30px auto;
    .markdown{
      // https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B9%E5%85%83%E7%B4%A0
      ::v-deep  .tui-editor .te-md-splitter{
        width: 100%;
      }
    }
  }
}
</style>
